<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--     <style>
      .father {
        width: 500px;
        height: 500px;
        background: red;
      }
      .son {
        width: 200px;
        height: 200px;
        background: blue;
      }
    </style> -->
  </head>
  <body>
    <!--     <div class="father">
      <div class="son"></div>
    </div>
    <script>
      const father = document.querySelector(".father");
      const son = document.querySelector(".son");
      // 点击⽗盒⼦
      father.addEventListener("mouseover", function () {
        alert("我是爸爸");
      });
      // 点击⼦盒⼦
      son.addEventListener("mouseover", function () {
        event.stopPropagation();
        alert("我是⼉⼦");
      });
    </script> -->

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      // 普通依次绑定写法
      /* const lis = document.quer)ySelectorAll("ul li");
      for (let i = 0, l = lis.length; i < l; i++) {
        lis[i].addEventListener("click", function (e) {
          console.log(e.target);
        });
      }
 */
      // 事件委托写法
      /*       const ul = document.querySelector("ul");
      ul.addEventListener("click", function (e) {
        console.log(e.target);
        if (e.target.tagName === "LI") {
        }
      }); */

      /*       window.addEventListener('load',function(){
      window.addEventListener('DOMContentLoaded',function(){

      })
      }) */

      window.addEventListener("scroll", function () {});
    </script>
  </body>
</html>
